import router, { asyncRoutes } from './router'
import store from '@/store'
// 导入进度条插件
import NProgress from 'nprogress'
// 导入进度条样式
import 'nprogress/nprogress.css'
// 导入拼接文字
import getPageTitle from '@/utils/get-page-title'



const whiteList = ['/login', '/404'] // 白名单

// 基础的权限拦截
// 1.登录状态下，不能手动切换到/login页面，如果切换强制回到/首页
// 2.未登录状态下，只能去/login页面（白名单）其他页面不能进行跳转

// 知识点16：刷新网页会让路由守卫再走一次
// 全局前置守卫（只要路由发生跳转就先执行这里，在跳转页面之前）
router.beforeEach(async (to, from, next) => {
  NProgress.start()//开始进度条
  const token = store.getters.token//获取token
  if (token) {//登录
    if (to.path === '/login') {//如果有token还想去登入页
      next('/')//强制跳转到首页
      NProgress.done()//重定向，会导致上一次路由终端，启动的进度条需要手动关闭，
      // 重定向会导致路由守卫再次执行，再次开启一个进度条，跳转后关闭
    } else {
      // 如果没有用户名字，现请求等待成功后，我么放行页面next()
      // 如果有名字了if进不去，也要作呕next()放行页面
      // 如果没有名字在请求，有名字就不用请求量（vuex有值）不写判断就每次都请求浪费流量

      // 为何要加await?
      // await等待:等待后面用户信息保存到vuex,在next()跳转页面，就能直接看到用户名
      // 如果不加，异步去请求，主线程代码先往下next()跳转页面，页面上没有名字，异步请求数据完成vuex值变量华
      // 响应式更新所有使用vuex相关的变量-从没有名字到有名字显示

      next()//加到这里，让被动401退出时，拿到正确的未遂地址

      if (!store.getters.name) {//没有用户名字的话
        await store.dispatch('user/getUserInfoActions')//就去vuex中去调用用户的信息
        // 1.可以手动切换路由可以看到二级页面的，因为没有在本地userInfo的localStorage存储
        // 刷新页面请求回来的vuex里userInfo信息，没有存储在本地，所以每次舒心都会真正执行这里代码挂载二级路由
        // 2.不能切：刷新网页userInfo在本地存储，vuex直接去本地，if根本进不来，也没法挂载asyncRoutes

      }
      if (!store.getters.isHaveAsyncRoute) {//是否挂载了动态路由
        store.commit('app/SET_ASYNCROUTE')//修改状态，已经挂载了动态路由规则
        // console.log(asyncRoutes)
        // 进行判断过滤
        const menusArr = store.getters.menus//先把user的用户信息路由标识拿取出来

        // 思路：把每个路由对象取出来，用children第一个对象的name
        // 去menus标记字符串数组里判断，在就收集起来
        const asyncRoutesArr = asyncRoutes.filter(item => {
          return menusArr.includes(item.children[0].name.toLowerCase())//toLowerCase()转成小写的，includes查找
        })
        asyncRoutesArr.push({ path: '*', redirect: '/404', hidden: true })//此时会空白页

        router.addRoutes(asyncRoutesArr)//动态路由权限
        // 上面的已经给路由添加成功了，静态的路由规则也在router/index.js里本来就写好了

        // 取出vuex中的动态路由
        // vuex目的：只是为了让左侧导航layout/compinents/sidebar、index.vue里拿到静态+动态的路由规则对象的数组
        store.commit('permission/setRoutes', asyncRoutesArr)

        // 跳转-空白页-加完了动态路由-404的*通配符末尾-重定向当前刷新的这个页面
        next({
          path: to.path,
          replace: true//next()路由重定向类似this.$router.replace()
        })
      }
      // next()//其余页面放行
    }
  } else {//未登录
    // // if(to.path==='login'||to.pat==='404'){}小虾米写法
    // if (whiteList.includes(to.path)) {//如果去登录页 白名单====大神写法：并列判断，麻烦，因此搞一个数组，白名单，进行判断
    //   next()//放行
    // } else {
    //   next('/login')//强制跳转到登录页
    // }
    if (whiteList.includes(to.path)) { // 未登录->去白名单页面->放行
      next()
    } else {
      next('/login')
      NProgress.done()
    }
  }
  // 动态路由：坑点（经验）
  // 1..路由守卫中，先匹配现有路由规则数组（new Router中routes数组里规则）如果匹配了就放行跳转，如果没匹配就404
  // 2.才添加的动态路由规则，手动切换还能回去，点击左侧导航也好使
  // 3.路由守卫肯定比我点击手速快，（代码执行速度比我操作的块）当我手动切换/点击导航的时候，动态路由已经挂在完毕
  // 路由守卫-判断路由规则-放行页面-添加动态路由规则到数组后续-用户操作


})
// 后置守卫
router.afterEach((to) => {
  NProgress.done()
  // 网页切换完毕，在设置当前切换完毕的这个页面标题
  // console.log(to)//运行时的路由对象信息，包含路由规则数组里的对象
  document.title = getPageTitle(to.meta.title)

})
